<template>
	<view class="home"> 
		<custom-head-bar :foldState='foldState'></custom-head-bar>
		<view class="wrapper">
			<view class="infomodel">
				<view class="left">免费配送
				<!-- {{vuexValue1}}
					<button @click="clickbtn">修改值</button> -->
				</view>
			
				<view class="right">
					<u-icon name="order" color="#576b95" size="24"></u-icon>
					我的订单</view>
			</view>
			<view class="scrollLayout">
				<view class="leftScroll">
					<scroll-view scroll-y class="sContent" scroll-with-animation :scroll-top='leftScrollValue'>
						<view v-for="(item,index) in 20" class="navItem" :class="index==navIndex?'active':''" @click="clickNav(index)">{{item}}</view>
					</scroll-view>
				</view>
				<view class="rightScroll">
					<view class="pro-search">
						<u-icon name="search" color="#576b95" size="22"></u-icon>
						搜索
					</view>
					<scroll-view scroll-y class="sContent" scroll-with-animation :scroll-top='rightScrollValue' @scroll="rightScrollEvt"> 
						<view class="product-view" v-for="item in 20">
							<u-sticky class="tt-sticky" offset-top="0">
								<view class="product-title">
									产品名称{{item}}
								</view>
							</u-sticky>
							<view class="product-con">
								<view class="product-item" v-for="item in 3">
									<product-item></product-item>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view> 
		<view class="bot">
			<car-layout></car-layout>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations,mapGetters } from "vuex";
	export default {
		data() {
			return {
				title: 'Hello',
				navIndex:0,
				leftScrollValue:0,
				rightScrollValue:0,
				lefttopArr:[],
				righttopArr:[],
				foldState:false
			}
		},
		onLoad() {
			// !!!
			this.$nextTick(()=>{
				 this.getHeightArr()
			})
        
		},
		computed:{
			// ...mapGetters(['vuexHeight'])
		},
		methods: {
			// ...mapMutations(['setVuexHeight']),
			
			// clickbtn(){
			// 	this.setVuexHeight(55)
			// },
			// 点击导航
			clickNav(index){
				this.navIndex = index;
				console.log(this.navIndex);
				// 防抖处理
				this.timeout = setTimeout(()=>{
					this.leftScrollValue=this.lefttopArr[index]
					this.rightScrollValue=this.righttopArr[index]
				},100)	
			},
			// 获取滚动条高度
			getHeightArr(){
				let selectorQuery = uni.createSelectorQuery();
				// 左侧滚动到区域的节点组
				selectorQuery.selectAll(".navItem").boundingClientRect(rects=>{
				this.lefttopArr = rects.map(item=>item.top-150 )
				console.log(this.lefttopArr)
				}).exec();
				// 右侧滚动到区域的节点组
				selectorQuery.selectAll(".product-view").boundingClientRect(rects=>{
				this.righttopArr = rects.map(item=>item.top-150 )
				console.log(this.righttopArr)
				}).exec();
			},
			// 监听右侧滚动条的改变
			rightScrollEvt(e){
				console.log(e);
				let scrollTop = Math.ceil(e.detail.scrollTop);
				let idx = this.righttopArr.findIndex((value,index,arr)=>scrollTop>=value && scrollTop < arr[index+1])
				this.navIndex = idx;
				this.leftScrollValue = this.lefttopArr[idx];
				if(scrollTop<300){
					this.foldState=false;
				}
				if(scrollTop>400){
					this.foldState=true;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home{ height: 100vh; overflow: hidden; display: flex; flex-direction: column;
		
		.wrapper{ flex-grow: 1; background: $border-color-light; position: relative; z-index: 2; overflow: hidden; margin-top: -20rpx; background: #fff; border-radius: 20rpx 20rpx 0 0;
			.infomodel{ color: $text-font-color1;  position: relative; z-index: 10;  @include flex-box-set(between,center); padding: 0 30rpx; height: 90rpx; border-bottom: 1px solid #ddd; font-size: 26rpx;
			  .right{ @include flex-box(); color: $brand-theme-color-aux;}
			}
			.scrollLayout{ height: calc(100% - 80rpx); @include flex-box();
				.leftScroll{ height: 100%; width: 190rpx; border-right: 1px solid $border-color; background-color: $page-bg-color;
					.navItem{ font-size: 30rpx; padding-left: 30rpx; line-height: 100rpx; color: $text-font-color1; position: relative;
						&.active{ color: $text-font-color1; background: #fff;  
							&:after{ content: ""; display: block; width: 6rpx; height: 30rpx; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
							 background: $brand-theme-color;}
						}
					}
				}
				.rightScroll{ height: 100%; flex-grow: 1; position: relative; padding: 0 30rpx;
					.pro-search{ position: absolute; right:30rpx; top:0; height:90rpx; font-size: 28rpx; color:$brand-theme-color-aux; @include flex-box-set(center,center); z-index: 3;}
					.product-view{
						.tt-sticky{ top:0 !important;}
						.product-title{ line-height: 90rpx; background: #fff; font-size: 30rpx; font-weight:bold;}
					}
				}
				.sContent{ height:100%; z-index: 2; position: relative;}
			}
		}
		
		 
	}

</style>
